<template>
  <div class="order-summary-card">
    <div class="header">
      <div class="title flex cur" @click="goUrl('/recycleManage/recycleOrdersmyBuy','huishou')">
        <subtit title="回收订单"></subtit>
        <div class="is-dot"></div>
        <div class="num-title">经营数据</div>
        <span class="date-range" @click.stop>{{ formatDateRange }}</span>
        <span @click.stop="isSummary = !isSummary" class="more">{{ isSummary ? '收起' : '展开' }} <i :class="isSummary ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i> </span>
      </div>
    </div>

    <div class="summary-list">
      <div v-if="!isSummary">
        <div class="summary-row">
          <div class="summary-item" v-for="item in summaryConfigShow" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ summaryData[item.key] || 0 }}

            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="summary-row">
          <div class="summary-item" v-for="item in summaryConfig.slice(0, 5)" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ summaryData[item.key] || 0 }}</div>
          </div>
        </div>

        <el-divider class="lines"></el-divider>
        <div class="summary-row">
          <div class="summary-item" v-for="item in summaryConfig.slice(5, 10)" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ summaryData[item.key] || 0 }}

              <span v-if="item.key == 'beixiaozhuanhualv' || item.key=='beixiaomaolilv'">%</span>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <div class="title flex cur" @click="goUrl('/tenantOrders/SaleOrderPage','xiaoshou')">
        <subtit title="销售数据"></subtit>
        <div class="is-dot"></div>
        <div class="num-title">经营数据</div>
        <span class="date-range" @click.stop>{{ formatDateRange }}</span>
        <span @click.stop="isXiaoshou = !isXiaoshou" class="more">{{ isXiaoshou ? '收起' : '展开' }} <i :class="isXiaoshou ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i> </span>

      </div>
    </div>
    <div class="summary-list">
      <div v-if="!isXiaoshou">
        <div class="summary-row">
          <div class="summary-item" v-for="item in xiaoshouConfigShow" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ xiaoshouData[item.key] || 0 }}

            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="summary-row">
          <div class="summary-item" v-for="item in xiaoshouConfig.slice(0, 6)" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ xiaoshouData[item.key] || 0 }}
              <span v-if="item.key == 'salemaolilv'">%</span>
            </div>
          </div>
        </div>

        <el-divider class="lines"></el-divider>
        <div class="summary-row">
          <div class="summary-item" v-for="item in xiaoshouConfig.slice(6)" :key="item.key">
            <div class="label">
              {{ item.label }}
              <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
                <img src="../../../assets/img/question.png" alt="问号">
              </el-tooltip>
            </div>
            <div class="value">{{ xiaoshouData[item.key] || 0 }}
              <span v-if=" item.key&&item.key=='saleAftetTuilv'">%</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="header">
      <div class="title flex">
        <subtit title="售后订单"></subtit>
        <div class="is-dot"></div>
        <div class="num-title">数据汇总</div>
        <span class="date-range">{{ formatDateRange }}</span>

      </div>
    </div>
    <div class="summary-list">
      <div class="summary-row">
        <div class="summary-item" v-for="item in shouhouConfig.slice(0,4)" :key="item.key">
          <div class="label cur">
            {{ item.label }}
            <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
              <img src="../../../assets/img/question.png" alt="问号">
            </el-tooltip>
          </div>
          <div class="value">{{ shouhouData[item.key] || 0 }}</div>
        </div>
      </div>
      <div class="summary-row" style="margin-top: 10px;">
        <div class="summary-item" v-for="item in shouhouConfig.slice(4,6)" :key="item.key">
          <div class="label cur">
            {{ item.label }}
            <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
              <img src="../../../assets/img/question.png" alt="问号">
            </el-tooltip>
          </div>
          <div class="value">{{ shouhouData[item.key] || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { huishou, xiaoshou, shouhou, qushi } from "@/api/dmgt/index";
import subtit from "@/components/indexComponents/subtit.vue";
export default {
  name: "OrderSummaryCard",
  components: { subtit },
  props: {
    queryParams: {
      type: Object,
      default: () => ({}),
    },
    formatDateRange: {
      type: [Array, String],
      default: () => [],
    },
  },

  data() {
    return {
      isSummary: false,
      isXiaoshou: false,
      // 1. 统计数据对象
      summaryData: {},
      xiaoshouData: {},
      shouhouData: {},

      summaryConfigShow: [
        {
          label: "回收订单",
          key: "backCot",
          tip: "当前条件下，完成交易的回收订单，时间以交易完成时间为准。",
        },
        {
          label: "回收总支出(¥)",
          key: "backAmount",
          tip: "这些回收订单的总金额",
        },
        {
          label: "转销售订单数",
          key: "toSaleCot",
          tip: "当前条件下，回收后已销售的订单数，只包含【交易完成】的数据。",
        },
        // { label: '未支付订单',  key: 'backNoPayCot' },
        // { label: '未支付金额',  key: 'backNoPayAmount' },
      ],
      xiaoshouConfigShow: [
        {
          label: "销售订单",
          key: "saleCot",
          tip: "当前条件下，完成交易的销售订单，时间以交易完成时间为准。",
        },
        { label: "销售总金额(¥)", key: "saleAmount" },
        {
          label: "转售后订单(次)",
          key: "saleAftetCot",
          tip: "以上销售订单中，产生的售后订单数。",
        },
        {
          label: "综合毛利润(¥)",
          key: "zonghemaolirun",
          tip: "销售毛利润 - 已退款总金额",
        },
        //  { label: '未支付订单',  key: 'saleNoPayTuiCot' },
        // { label: '未支付金额',  key: 'saleNoPayAmount' },
      ],
      // 2. 配置数组
      summaryConfig: [
        {
          label: "回收订单",
          key: "backCot",
          tip: "当前条件下，完成交易的回收订单，时间以交易完成时间为准。",
        },
        {
          label: "回收总支出(¥)",
          key: "backAmount",
          tip: "这些回收订单的总金额",
        },
        { label: "回收换绑成功数", show: false, key: "backChangeCot" },
        // { label: '未支付订单',  key: 'backNoPayCot' },
        // { label: '未支付金额',  key: 'backNoPayAmount' },

        {
          label: "转销售订单数",
          key: "toSaleCot",
          tip: "当前条件下，回收后已销售的订单数，只包含【交易完成】的数据。",
        },
        { label: "被销总金额(¥)", key: "toSaleAmount" },
        { label: "被销毛利润(¥)", key: "beixiaomaolirun" },
        {
          label: "被销转换率",
          key: "beixiaozhuanhualv",
          tip: "当前条件下，【转销售订单】占【回收订单总数】的百分比",
        },
        {
          label: "被销毛利率",
          key: "beixiaomaolilv",
          tip: "当前条件下，【被销毛利润】占【被销总金额】的百分比",
        },
      ],
      xiaoshouConfig: [
        {
          label: "销售订单",
          key: "saleCot",
          tip: "当前条件下，完成交易的销售订单，时间以交易完成时间为准。",
        },
        { label: "销售总金额(¥)", key: "saleAmount" },
        { label: "销售毛利润", key: "saleprofits" },
        {
          label: "销售毛利率",
          key: "salemaolilv",
          tip: "当前条件下，【销售毛利润】占【销售总金额】的百分比",
        },
        // { label: '未支付订单',  key: 'saleNoPayTuiCot' },
        // { label: '未支付金额',  key: 'saleNoPayAmount' },
        {
          label: "转售后订单(次)",
          key: "saleAftetCot",
          tip: "以上销售订单中，产生的售后订单数。",
        },
        { label: "已退款订单数", key: "saleAftetTuiCot" },
        { label: "已退款总金额(¥)", key: "saleAftetTuiAmount" },
        { label: "售后退款率", key: "saleAftetTuilv" },
        { 
          label: "亏损订单", 
          key: "kuisunCot" ,
          tip: "亏损订单 - 订单利润为负的订单",
        },
        { 
          label: "亏损金额((¥))", 
          key: "kuisunAmount" ,
          tip: "亏损金额 - 亏损订单的亏损金额",
        },
        {
          label: "综合毛利润(¥)",
          key: "zonghemaolirun",
          tip: "销售毛利润 - 已退款总金额",
        },
      ],
      shouhouConfig: [
        {
          label: "回收售后数",
          key: "huishoushouhou",
          path: "/recycleManage/backorderAfterList",
        },
        {
          label: "回收售后金额(¥)",
          key: "shouhoujine",
          path: "/recycleManage/backorderAfterList",
        },
        {
          label: "回收售后赔付(¥)",
          key: "peifu",
          path: "/recycleManage/backorderAfterList",
        },
        {
          label: "回收售后亏损(¥)",
          key: "kuisun",
          path: "/recycleManage/backorderAfterList",
        },
        {
          label: "销售售后数",
          key: "xiaoshoushouhou",
          path: "/tenantOrders/SaleAfterOrder",
        },
        {
          label: "销售售后赔付(¥)",
          key: "xiaoshoupeifu",
          path: "/tenantOrders/SaleAfterOrder",
        },
      ],
    };
  },
  methods: {
    getHuishouData() {
      huishou(this.queryParams).then((res) => {
        if (res.data.length > 0) {
          this.summaryData = { ...this.summaryData, ...res.data[0] };
        }
      });
    },
    getXiaoshouData() {
      xiaoshou(this.queryParams).then((res) => {
        if (res.data.length > 0) {
          this.xiaoshouData = { ...this.xiaoshouData, ...res.data[0] };
        }
      });
    },
    getShouhou() {
      this.shouhouData = {}
      shouhou(this.queryParams).then((res) => {
        if(res.data){
          this.shouhouData ={
            huishoushouhou:res.data.huishoushouhou.cot||0,
            shouhoujine:res.data.huishoushouhou.sum_buyer_actual_amount||0,
            peifu:res.data.huishoushouhou.peifujine||0,
            kuisun:res.data.huishoushouhou.sum_buyer_actual_amount - res.data.huishoushouhou.peifujine,
            xiaoshoushouhou:res.data.xiaoshoushouhou.cot||0,
            xiaoshoupeifu:res.data.xiaoshoushouhou.sum_after_amount||0,
          };
        }


        // this.shouhouData = { ...this.shouhouData, ...res.data };
      });
    },
    goUrl(url, type) {
      let query;
      // 加时间戳
      const timestamp = new Date().getTime();
      if (type == "huishou") {
        query = {
          orderStatus: 4,
          finishTimeStart: this.queryParams.createTimeStart,
          finishTimeEnd: this.queryParams.createTimeEnd,
          deptIdList: JSON.stringify(this.queryParams.deptIdList),
          gameId: this.queryParams.gameId,
          channel: this.queryParams.channel,
          buyerId: this.queryParams.userId,
          timestamp
        };
      } else {
        query = {
          orderStatus: 1,
          finishTimeStart: this.queryParams.createTimeStart,
          finishTimeEnd: this.queryParams.createTimeEnd,
          deptIdList: JSON.stringify(this.queryParams.deptIdList),
          gameId: this.queryParams.gameId,
          saleChannel: this.queryParams.saleChannel,
          saleUserId: this.queryParams.userId,
          timestamp
        };
      }
      this.$router.push({
        path: url,
        query: query,
      });
    },
    init() {
      this.getHuishouData();
      this.getXiaoshouData();
      this.getShouhou();
    },
  },

  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.order-summary-card {
  background: #fff;
  border-radius: 8px;
  padding: 0 24px 12px 24px;
  margin-bottom: 18px;

  .header {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #222;

      .date-range {
        font-size: 12px;
        color: #666;
        margin-left: 8px;
      }
    }

    .collapse-btn {
      font-size: 13px;
      color: #666;

      i {
        font-size: 12px;
      }
    }
  }

  .summary-list {
    padding: 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.1);
    margin-top: 16px;

    .summary-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(0, 218px));
      gap: 12px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    .summary-item {
      padding: 8px 16px;

      background: #f7f8fa;
      border-radius: 4px;

      // margin-right: 24px;
      // margin-bottom: 8px;
      .label {
        font-weight: 500;
        font-size: 14px;
        color: #666;
        display: flex;
        align-items: center;

        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
          cursor: pointer;
        }
      }

      .value {
        font-size: 28px;
        font-weight: 600;
        color: #333333;
        margin-top: 8px;
      }
    }

    .lines {
      margin: 16px 0;
      background: #efefef;
    }

    .summary-row .summary-item:last-child {
      margin-right: 0;
    }
  }
}

.header {
  .flex {
    align-items: center;
  }

  .num-title {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }

  .shu-refresh {
    color: #fa6400;
    font-size: 12px;
    margin-left: 8px;
    font-weight: 400;

    .font14 {
      font-size: 12px;
      margin-right: 4px;
    }

    .el-icon-refresh-right {
      font-size: 15px;
      cursor: pointer;
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.is-dot {
  width: 3px;
  height: 3px;
  background-color: #333333;
  border-radius: 50%;
  margin: 0 8px;
}

.cur {
  cursor: pointer;
}

.more {
  color: #666;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 10px;
  font-weight: 400;
  background-color: #f4f4f4;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
</style>
